<template>
  <div>
    <div class="productCarbonAccounting">
      <!-- 标题 -->
      <div class="productCarbonAccounting-title">产品碳核算</div>


      <!-- 条件筛选 -->
      <div class="productCarbonAccounting-condition">
        <div class="productCarbonAccounting-condition-form">
          <normal-form-plus
            :formModel="formModel"
            :config="config"
            :plus="plus"/>
        </div>
        <div class="productCarbonAccounting-condition-btn">
          <el-button>查询</el-button>
          <el-button>重置</el-button>
          <el-button @click="drawer = true">新增</el-button>
        </div>
      </div>


      <!-- 表格 -->
      <div class="productCarbonAccounting-report">
        <normal-table
          :tableData="tableData"
          :paginationConfig="paginationConfig"
          :tableLabel="tableLabel"
          :operationConfig="operationConfig"
          :operationList="operationList"
          @event="handleEvent"
          @changePage="changePage"></normal-table>
      </div>

      <!-- 新增产品碳核算-抽屉 -->
      <el-drawer
        title="新增产品碳核算"
        :visible.sync="drawer"
        :direction="'rtl'">
        <normal-form
          :formModel="addFormModel"
          :config="addConfig"
          :plus="plus"/>
        <div class="drawer-btn">
          <el-button type="primary" @click="makeSure()">确认</el-button>
        </div>
      </el-drawer>

      <!-- 生成产品碳足迹报告 -->
      <el-drawer
        title="新增产品碳核算"
        :visible.sync="drawer2"
        :direction="'rtl'">
        <normal-form
          :formModel="addReportFormModel"
          :config="addReportConfig"
          :plus="plus"/>
        <div class="drawer-btn">
          <el-button type="primary" @click="makeSure2()">确认</el-button>
        </div>
      </el-drawer>


    </div>
  </div>
</template>

<script>
import NormalForm from '@/components/NormalForm'
import NormalTable from '@/components/NormalTable'
import NormalFormPlus from '@/components/NormalFormPlus'

export default {
  name: 'productCarbonAccounting',
  components: {
    NormalTable,
    NormalFormPlus,
    NormalForm
  },
  mounted() {
    this.getCalculationByPage()
    this.getAllModel()
  },
  data() {
    return {
      focusCalculationId: '',
      drawer2: false,
      addReportFormModel: {
        "name": "",
        "personInfo": "",
        "personMobile": "",
        "personEmail": ""
      },
      addReportConfig: [
        {
          id: '1',
          type: 'input',
          model: 'name',
          name: '报告名称',
          edit: true,
          props: {
            placeholder: '报告名称',
            width: 200
          }
        },
        {
          id: '2',
          type: 'input',
          model: 'personInfo',
          name: '报告负责人',
          edit: true,
          props: {
            placeholder: '报告负责人',
            width: 200
          }
        },
        {
          id: '3',
          type: 'input',
          model: 'personMobile',
          name: '报告负责人电话',
          edit: true,
          props: {
            placeholder: '报告负责人电话',
            width: 200
          }
        },
        {
          id: '4',
          type: 'input',
          model: 'personEmail',
          name: '报告负责人邮箱',
          edit: true,
          props: {
            placeholder: '报告负责人邮箱',
            width: 200
          }
        },
      ],
      // 新增碳足迹报告-数据
      addFormModel: {
        name: "",
        num: '',
        emissionUnit: "",
        note: "",
        calculationModelId: ''
      },
      addConfig: [
        {
          id: '1',
          type: 'input',
          model: 'name',
          name: '核算名称',
          edit: true,
          props: {
            placeholder: '请输入核算名称',
            width: 200
          }
        },
        {
          id: '2',
          type: 'input',
          model: 'num',
          name: '产品核算数量',
          edit: true,
          props: {
            placeholder: '请输入产品核算数量',
            width: 200
          }
        },
        {
          id: '3',
          type: 'select',
          model: 'emissionUnit',
          name: '排放量单位',
          edit: true,
          props: {
            placeholder: '排放量单位',
            options: [
              {value: 'kg', label: 'kg'},
              {value: 't', label: 't'}
            ]
          },

        },
        {
          id: '4',
          type: 'text',
          model: 'note',
          name: '说明',
          edit: true,
          props: {
            placeholder: '说明',
          },
        },
        {
          id: '5',
          type: 'select',
          model: 'calculationModelId',
          name: '选择核算模型',
          edit: true,
          props: {
            placeholder: '选择核算模型',
            options: []
          },
        },
      ],
      plus: {},
      drawer: false,
      formModel: {},
      config: [
        {
          id: 1,
          items: [
            {
              id: '1',
              edit: true,
              type: 'input',
              span: 6,
              model: 'modelLevel',
              name: '',
              props: {
                placeholder: "核算名称",

              }
            },
            {
              id: '2',
              edit: true,
              type: 'input',
              span: 6,
              model: 'modelLevel',
              name: '',
              props: {
                placeholder: "产品名称",

              }
            },
          ]
        },
      ],
      plus: {},
      tableData: [],
      paginationConfig: {
        total: 100,
        page: 1,
        pageSize: 10,
        show: true
      },
      operationList: [
        {
          name: '核算管理',
          order: 1,
          buttonClass: 'primary',
          plus: {}
        },
        {
          name: '生成报告',
          order: 2,
          buttonClass: 'primary',
          plus: {}
        },
        {
          name: '删除',
          order: 3,
          buttonClass: 'danger',
          plus: {}
        }
      ],
      operationConfig: {select: false},
      tableLabel: [
        {
          prop: "order",
          label: "序号",
          width: 70
        },
        {
          prop: "name",
          label: "核算名称",
          width: 200
        },
        {
          prop: "num",
          label: "产品核算数量"
        },
        {
          prop: "emission",
          label: "排放量(CO2e)",
          width: 200
        },
        {
          prop: "emissionUnit",
          label: "排放量单位",
          width: 200
        },
        {
          prop: "@createTime",
          label: "创建时间",
          width: 200
        },
      ],

    }
  },
  methods: {
    // 获取所有模型列表
    getAllModel() {
      this.$API.product.getModelByPage({
        pageNo: 1,
        pageSize: 100,
      }).then(response => {
        var data = response.data.list
        var li = []
        for (var i = 0; i < data.length; i++) {
          li.push({
            label: data[i].name,
            value: data[i].id,
          })
        }
        this.addConfig[4].options = li
        this.addConfig[4].props.options = li
      })
    },
    createReportNew() {
      this.$API.product.createReportNew({
        calculationId: this.focusCalculationId,
        ...this.addReportFormModel
      }).then(response => {

      })
    },
    // 创建核算报告
    makeSure2() {
      this.createReportNew()
      this.drawer2 = false;
    },
    // 创建核算
    makeSure() {
      this.createCalculation()
      this.drawer = false;
    },
    createCalculation() {
      this.$API.product.createCalculation({
        ...this.addFormModel
      }).then(response => {
        this.getCalculationByPage();
      })
    },
    // 处理表格点击事件
    handleEvent(order, row) {
      if (order === 1) {
        this.$router.push({
          path: "/carbonFootprintVerification/productCarbonAccounting/addProductCarbonAccounting2",
          query: row
        })
      } else if (order === 2) {
        this.drawer2 = true
        this.focusCalculationId = row.id
      }
    },
    // 分页点击事件
    changePage() {
      this.getCalculationByPage();
    },
    getCalculationByPage() {
      this.$API.product.getCalculationByPage({
        pageNo: this.paginationConfig.page,
        pageSize: this.paginationConfig.pageSize,
        name: this.formModel.name == "" ? null : this.formModel.name//	工序名称
      }).then(response => {
        this.tableData = response.data.list
        this.paginationConfig.total = response.data.total
      })
    }
  }
}
</script>

<style lang="less" scoped>
.drawer-btn {
  right: 20px;
  position: absolute;
  bottom: 20px;
}

.productCarbonAccounting {

  height: 1680px;
  overflow: hidden;
  padding: 15px 10px;
  // 标题
  .productCarbonAccounting-title {
    font-size: 16px;
    font-weight: bold;
  }

  .productCarbonAccounting-condition {
    display: flex;

    .productCarbonAccounting-condition-form {
      flex: 3;
    }

    .productCarbonAccounting-condition-btn {
      flex: 1;
    }
  }

  // 核算报告表格
  .productCarbonAccounting-report {
    .productCarbonAccounting-history-title {
      font-size: 14px;
    }
  }
}
</style>
